KarlComSe /
SvenskaElsparkcyklarAB
| Conditions | 10 |
| Total Lines | 67 |
| Code Lines | 58 |
| Lines | 0 |
| Ratio | 0 % |
| Tests | 22 |
| CRAP Score | 10.0578 |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
Complex classes like ShowMap.tsx ➔ ShowMap often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
| 1 | import Map from '../../components/Map'; |
||
| 13 | |||
| 14 | export default function ShowMap() { |
||
| 15 | 2 | const { city } = useParams(); |
|
| 16 | 2 | const [zoneData, setZoneData] = useState<Zone[]>([]); |
|
| 17 | 2 | const [scooterData, setScooterData] = useState<Scooter[]>([]); |
|
| 18 | 2 | const [realTime, setRealTime] = useState(false); |
|
| 19 | 2 | const [isLowRes, setIsLowRes] = useState(false); |
|
| 20 | 2 | const [trigger, setTrigger] = useState(0); |
|
| 21 | 2 | const timerRef = useRef<null | number>(null); |
|
| 22 | |||
| 23 | |||
| 24 | 2 | useEffect(() => { |
|
| 25 | 1 | const fetchScooters = async() => { |
|
| 26 | 1 | try { |
|
| 27 | 1 | const response = await axios.get(`${API_URL}/bike/city/${city}`); |
|
| 28 | 1 | setScooterData(response.data); |
|
| 29 | } |
||
| 30 | catch(error) |
||
| 31 | { |
||
| 32 | const axiosError = error as AxiosError; |
||
| 33 | console.log(axiosError?.response?.data); |
||
| 34 | } |
||
| 35 | } |
||
| 36 | 1 | fetchScooters(); |
|
| 37 | },[city, trigger]) |
||
| 38 | |||
| 39 | 2 | useEffect(() => { |
|
| 40 | 1 | const fetchZones = async () => { |
|
| 41 | 1 | try { |
|
| 42 | |||
| 43 | 1 | const response = await axios.get(`${API_URL}/zone/city/${city}`); |
|
| 44 | 1 | setZoneData(response.data); |
|
| 45 | } |
||
| 46 | catch(error) |
||
| 47 | { |
||
| 48 | 1 | const axiosError = error as AxiosError; |
|
| 49 | 1 | console.log(axiosError?.response?.data); |
|
| 50 | } |
||
| 51 | } |
||
| 52 | 1 | fetchZones(); |
|
| 53 | },[city]); |
||
| 54 | |||
| 55 | |||
| 56 | 2 | return ( |
|
| 57 | <RealTimeContext.Provider value={{realTime, setRealTime, isLowRes, setIsLowRes}}> |
||
| 58 | <AdminGate/> |
||
| 59 | <div data-testid="show-map" className="mx-auto sm:max-w-4xl"><Map city={city ?? "Göteborg"} zoneData={zoneData} scooterData={scooterData}/></div> |
||
| 60 | |||
| 61 | <RealTimeUpdate timerRef={timerRef} setTrigger={setTrigger}/> |
||
| 62 | |||
| 63 | <div id="scooter-list" className="p-4 flex flex-col justify-center w-full"> |
||
| 64 | <div className="mx-auto"> |
||
| 65 | <h2 className="text-4xl font-bold text-gray-900"> Cyklar i {city}: </h2> |
||
| 66 | </div> |
||
| 67 | {scooterData.length > 0 ? ( |
||
| 68 | <> |
||
| 69 | <div className="mx-auto mb-5"> |
||
| 70 | <h2>Antal cyklar: <b>{scooterData.length}</b> </h2> |
||
| 71 | </div> |
||
| 72 | <BikeList scooterData={scooterData} isCityList={false} isLowRes={realTime}/> |
||
| 73 | </>) : ( |
||
| 74 | <div className="mx-auto mb-5"> |
||
| 75 | <p>Inga cyklar tillgängliga</p> |
||
| 76 | </div> |
||
| 77 | )} |
||
| 78 | </div> |
||
| 79 | </RealTimeContext.Provider> |
||
| 80 | ) |
||
| 82 |
